 /*
 * 轮播图管理视图
 * @Author: LuoQianJun
 * @Date: 2018-01-25 15:13:18
 * @Last Modified by: LuoQianJun
 * @Last Modified time: 2018-01-30 16:44:31
 */

<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-carousel-views {
        padding: 20px;
    }

</style>

 <template>

    <div class="v-admin-carousel-views">

        <!-- 面包屑组件 -->
        <vBreadcrumb :breadcrumbList="breadcrumbList"></vBreadcrumb>

        <Tabs type="card" @on-click="changeTab">

            <TabPane label="新增" name="新增">

                <!-- 轮播图新增组件 -->
                <carousel-create ref="create"
                                 @post="postData"           
                                                >
                </carousel-create>

            </TabPane>


            <TabPane label="查看" name="查看">
                
                <carousel-index :loading="table_loading"
                                :banners="banners"
                                @edit="getCarouselDetail"   
                                @delete="deleteCarousel"
                                @watch="watchCarousel"
                                                        >
                </carousel-index>
            
            </TabPane>
        </Tabs>

        <Modal title="修改轮播图" v-model="show_modal">
           

            <!-- 轮播图编辑组件 -->
            <carousel-edit   :carousel-detail="banner_detail"
                            @update="updateCarousel"
                            @watch="watchCarousel"
                            ></carousel-edit>

            <div slot="footer"></div>

        </Modal>

        <Modal width="1200" title="查看轮播图" v-model="show_banner_modal">
           

            <!-- 轮播图编辑组件 -->
            <watch-carousel :carousel-detail="banner_detail"></watch-carousel > 
                            
            <div slot="footer"></div>

        </Modal>
        
    </div>

 </template>
 
 <script>

import API_LIST from 'src/API_LIST';

import vBreadcrumb from 'src/views/component/breadcrumb';

import { mapGetters , mapMutations } from "vuex";

import qs from 'qs';

import carouselCreate from './create';

import carouselIndex from './index';

import carouselEdit from './edit';

import watchCarousel from './watch-carousel';

 export default {

     name: 'carousel',

      components : {

        vBreadcrumb,

        carouselCreate,

        carouselIndex,

        carouselEdit,

        watchCarousel
        
    },

    data: function() {	

         return {

            breadcrumbList: [
                {
                    name : '管理员',
                    href : '#',
                },
                {
                    name : '轮播图',
                    href : '#',
                }
            ],

            search_info : {

                page : 1

            },                      //分页信息

            table_loading : false,      //表格更新时的loading

            show_modal : false,         //弹框的控制

            show_banner_modal : false,  //轮播图大图弹框

            banners : [],         //轮播图列表

            banner_detail : {},   //轮播图详情


         }
     },

    computed: {
        ...mapGetters('userToken',[
            'getToken'
        ])  
    },

    methods: {

        ...mapMutations('spinShow',[
            'showSpin',
            'closeSpin'
        ]),

        /**
         * 切换tab
         * @param  {tab_name} tab_name {tab的name}
         * @return {undefined} 
         */
        changeTab(tab_name) {
            
            if( tab_name === '查看' ) {

                this.fetchCarouselList();

            } else {
                
                this.banners = [];

            }

        },

        /**
         * 查看轮播图详情
         * @param  {string} id {轮播图的id}
         * @return {undefined}
         */
        getCarouselDetail(id) {

            this.banner_detail = this.banners.filter((banner) => banner.id === id)[0];

            this.show_modal = true;

        },

        /**
         * 查看轮播图大图
         * @param  {string} id {轮播图的id}
         * @return {undefined}
         */
        watchCarousel(id) {
            
            this.banner_detail = this.banners.filter((banner) => banner.id === id)[0];

            this.show_banner_modal = true;

        },

        /**
         * 新增轮播图的post数据
         * @return {undefined}
         */
         postData(param){

            this.showSpin('请稍后');

            this.$http.post( API_LIST.CAROUSEL , param )
                    .then(({ data })=>{
                                
                        if( parseInt(data.code) !== 0 )throw new Error(data.error);

                        this.$Message.success('新增轮播图成功！');

                        this.$refs.create.handleReset('formValidate');
                                
                    })
                    .catch((err)=>{

                        this.$Message.error(err.message);
                
                    })
                    .then(this.closeSpin)

        },

        /**
         * 删除轮播图
         * @param  {string} id {需要删除的轮播图的id}
         * @return {undefined}
         */
        deleteCarousel(id) {

            this.$Modal.confirm({

                title: '确定删除该图片吗？',

                onOk: () => {

                    const param = {

                        _method : 'DELETE'

                    }

                    this.table_loading = true;

                    this.$http.post( API_LIST.CAROUSEL + '/' + id , param)
                        .then(({ data })=>{
                                    
                            if( parseInt(data.code) !== 0 )throw new Error(data.error);

                            this.fetchCarouselList(this.search_info);

                            this.$Message.success('删除成功');
                                    
                        })
                        .catch((err)=>{
                    
                            this.$Message.error(err.message || err.statusText);

                        })
                        .then(() => this.table_loading = false)
                    
                },
                onCancel: () => {}
            });
        },

        /**
         * 获取轮播图列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
        fetchCarouselList(param) {

            this.table_loading = true;

            let query_str = qs.stringify(param);
            
            this.$http.get( API_LIST.CAROUSEL + '?' + query_str)

                .then(({ data }) => {
                    
                    if( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.banners = data.banners;
                    
                })

                .catch(( err ) => {

                    this.$Message.error(err.message);
                    
                })

                .then(() => this.table_loading = false)



        },

         /**
         * 更新轮播图信息
         * @param  {string} id {轮播图的id}
         * @return {undefined}
         */
        updateCarousel(id,param) {

            this.showSpin('请稍后');

            this.$http.post( API_LIST.CAROUSEL + '/' + id, param )
                .then(({ data })=>{
                            
                    if  ( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.$Message.success('更新成功！');

                    this.show_modal = false;

                    this.fetchCarouselList(this.search_info);
                            
                })
                .catch((err)=>{

                    this.$Message.error(err.message || err.statusText);
            
                })
                .then(this.closeSpin)

        },
     }
 }
 </script>
